<template>
  <div>
    <div class="rightLayout_topo">
      <div class="layoutWrap_topo">
        <div class="layoutTop_topo">
          <div class="layoutTopMain_topo">
            <div class="layoutTitle_topo">
              <div class="typeImg_topo"><img :src="host.icon"></div>
              <div class="typeName_topo">{{host.name}}</div>
            </div>
            <a href="javascript:;" class="hideLayoutBtn_topo" @click="hideLayout()">
              <i class="layoutCloseIcon_topo"></i>关闭</a>
          </div>
        </div>
        <div class="layoutMain_topo">
          <itemListComp></itemListComp>
          <el-tabs type="card" style="margin: 10px 0 20px 0;">
            <el-tab-pane label="概述">
              <itemSummaryComp></itemSummaryComp>
            </el-tab-pane>
            <el-tab-pane label="报告">
              <itemReportComp></itemReportComp>
            </el-tab-pane>
            <el-tab-pane label="数据">
              <itemDataComp></itemDataComp>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import eventHubs from 'common/eventHubs'
import Utils from 'utils/filters'
import itemListComp from './itemList.vue'
import itemSummaryComp from './itemSummary.vue'
import itemReportComp from './itemReport.vue'
import itemDataComp from './itemData.vue'
export default {
  name: 'topoElementDetail',
  components: {
    itemListComp,
    itemSummaryComp,
    itemReportComp,
    itemDataComp
  },
  data() {
    return {
      host: {
        hostid: '',
        name: '',
        icon: ''
      },
    }
  },
  computed: {
    sysIcons() {
      return this.$store.state.topo.sysIcons;
    }
  },
  created() {
    const self = this
    //接受host改变的事件
    eventHubs.getEventHub().$on('topoElementDetail', (curMapElement) => {
      self.host.hostid = curMapElement.elementid
      self.host.name = curMapElement.label
      let sysIcons = self.sysIcons
      self.host.icon = Utils.getImg(sysIcons, curMapElement.iconid_off)

      //注册host改变的事件
      eventHubs.getEventHub().$emit("hostChanged", self.host.hostid);
      self.showLayout()
    });
  },
  mounted() {
  },
  methods: {
    hideLayout() {
      $(".rightLayout_topo").animate({
        left: "100%"
      }).removeClass("showBlock_topo").hide();
      $(".layoutTop_topo").animate({
        left: "100%"
      }).hide();
      // $(".layoutWrap").show();
      $("body").removeClass("hideScoll_topo");
    },
    showLayout() {
      $(".rightLayout_topo").show().animate({
        left: "20%"
      }).addClass("showBlock_topo");
      $(".layoutTop_topo").show().animate({
        left: "20%"
      }); //右侧顶部固定
      $("body").addClass("hideScoll_topo"); //隐藏主滚动条，禁止出现双滚
    }
  }

}
</script>
